<template>
  <view class="asa-searchbar" :class="mode">
    <view :class="{ 'white-icon': bgColor !== '#fff' }">
      <u-search
        v-bind="$attrs"
        :height="height"
        :searchIconSize="searchIconSize"
        :showAction="showAction"
        :bgColor="bgColor"
        :borderColor="borderColor"
        :color="color"
        :value="keyword"
        @change="(val) => emit('change', val)"
        @search="(val) => emit('search', val)"
        @custom="(val) => emit('custom', val)"
        @blur="(val) => emit('blur', val)"
        @focus="(val) => emit('focus', val)"
        @clear="(val) => emit('clear', val)"
        :searchIcon="
          bgColor === '#fff'
            ? 'https://zxtest001.oss-cn-beijing.aliyuncs.com/l-owner-uni3/top_icon_search%403x.png'
            : 'https://zxtest001.oss-cn-beijing.aliyuncs.com/l-owner-uni3/top_icon_search_gray@3x.png'
        "
      ></u-search>
    </view>
  </view>
</template>
<script lang="ts">
export default {
  inheritAttrs: false,
};
</script>

<script setup lang="ts">
/**
 * button
 * @property {String}	keyword 搜索文字
 */
import { useVmodel } from '@/lib/hook/useVmodel';

const props = defineProps({
  mode: {
    type: String,
    default: '',
  },
  keyword: {
    type: String,
  },
  height: {
    type: Number,
    default: 32,
  },
  searchIconSize: {
    type: Number,
    default: 15,
  },
  showAction: {
    type: Boolean,
    default: true,
  },

  bgColor: {
    type: String,
    default: '#f2f2f2',
  },
  color: {
    type: String,
    default: '#1a1c27',
  },
  borderColor: {
    type: String,
    default: '#f2f2f2',
  },
});
const emit = defineEmits(['change', 'search', 'blur', 'custom', 'focus', 'clear']);
// const proxy = useVmodel(props, 'keyword');
</script>

<style lang="scss" scope>
.asa-searchbar {
  ::v-deep .u-search__action {
    height: 72rpx;
    width: 124rpx;
    background: $uv-primary;
    color: #fff;
    margin-left: 30rpx;
    border-radius: 34rpx;
    backdrop-filter: blur(3px);
    line-height: 72rpx;
  }
  .white-icon {
    ::v-deep .u-search__content__input--placeholder {
      color: #eee !important;
      font-size: 28rpx;
    }
  }
  .u-search__content__input--placeholder {
    color: #dbdfe2 !important;
  }
}
</style>
